<script setup lang="ts">
import * as echarts from 'echarts'
import type { Props } from './utils/types'
const $props = defineProps<Props>()
const echartDom = shallowRef<any>()
const myChart = shallowRef<any>()

watch(() => $props.charts, (newValue) => {
    if (!newValue) return
    const data = newValue.map((item: any) => {

        if (item.name == '图片') return { name: `${item.name}\n${item.value}个`, value: item.value, itemStyle: { color: 'red' } }

        return { name: `${item.name}\n${item.value}个`, value: item.value }
    })

    nextTick(() => {
        myChart.value = echarts.init(echartDom.value);
        const option = {
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: ['60%', '70%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 5
                    },
                    data
                }
            ]
        }
        myChart.value.setOption(option)
    })
}, { immediate: true })

onUnmounted(() => {
    if (myChart.value) {
        myChart.value.dispose()
        myChart.value = undefined
    }
})


</script>

<template>
    <div class="pie">
        <!-- <div class="empty">无产品信息~</div> -->

        <div class="echart_box" ref="echartDom"></div>

    </div>
</template>

<style lang="scss" scoped>
.pie {
    width: 100%;
    height: 310px;

    .echart_box {
        height: 310px;
    }

    .empty {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: rgba(187, 187, 187, 1);
        font-size: 14px;
        font-family: 'SOURCEHANSANSCN-EXTRALIGHT';
    }
}
</style>
